<template>
  <div class="rollContainer">
    <div class="searchHead" ref="searchHead">
      <Form ref="formInline" :model="conditions" inline :label-width="100" :show-message="false">
        <div class="searchBox">
          <div class="conditionBox">
            <Row>
              <!-- <Col :span="6">
                <FormItem label="展会选择：">
                  <Select
                    v-model="conditions.app_type"
                    clearable
                    @on-change="changeStatus($event, 'app_type')"
                  >
                    <Option
                      v-for="item in client"
                      :value="item.id"
                      :key="item.value"
                    >{{ item.title }}</Option>
                  </Select>
                </FormItem>
              </Col>-->
              <Col :span="6">
                <FormItem label="选择类型：">
                  <Select v-model="conditions.by" clearable @on-change="chooseType($event, 'by')">
                    <Option
                      v-for="item in statusList"
                      :value="item.value"
                      :key="item.value"
                    >{{ item.label }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col :span="6">
                <FormItem label="文章分类：">
                  <Select
                    v-model="conditions.categoryId"
                    clearable
                    @on-change="changeStatus($event, 'categoryId')"
                  >
                    <Option
                      v-for="item in categoryList"
                      :value="item.categoryId"
                      :key="item.categoryId"
                    >{{ item.categoryName }}</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
          </div>
          <div class="searchBtnBox">
            <Button type="primary" @click="search()">搜索</Button>
            <Button @click="handleReset()">重置</Button>
          </div>
        </div>
      </Form>
      <div class="tableBtnBox">
        <Button icon="md-add" size="default" @click="Publish">发布文章</Button>
      </div>
    </div>
    <Table :columns="columns1" :height="tableHeight" border :data="list" :loading="loading">
      <template slot-scope="{ row }" slot="publishTime">
        <span>{{row.publishTime|dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
      </template>
      <template slot-scope="{ row }" slot="updateTime">
        <span>{{row.updateTime|dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <span class="tableBtn" @click="show(row)">
          <Icon size="18" type="ios-create-outline" />编辑
        </span>
        <span class="tableBtn" @click="remove(row.id)">
          <Icon size="18" type="ios-trash" />删除
        </span>
      </template>
    </Table>
    <div class="pageBox">
      <Page
        :total="total"
        :page-size="pageSize"
        :current="page"
        size="small"
        show-total
        show-sizer
        @on-change="changePage"
        @on-page-size-change="changeSize"
      />
    </div>
    <Modal v-model="isPublish" title="文章发布/保存" width="1000">
      <Form
        ref="formInline"
        :model="formInline"
        :rules="ruleInline"
        inline
        :label-width="100"
        fullscreen
      >
        <FormItem prop="title" label="文章标题">
          <Input
            type="text"
            v-model.trim="formInline.title"
            placeholder="请输入文章标题"
            style="width：300px"
          ></Input>
        </FormItem>
        <FormItem prop="subMessage" label="文章简介">
          <Input
            type="text"
            v-model.trim="formInline.subMessage"
            placeholder="请输入文章简介"
            style="width：300px"
          ></Input>
        </FormItem>
        <!-- <FormItem prop="content" label="文章内容">
          <Input type="text" v-model.trim="formInline.content" type="textarea" placeholder="请输入文章内容" style="width：300px"></Input>
        </FormItem>-->
        <FormItem label="文章分类：" prop="categoryId">
          <Select
            v-model="formInline.categoryId"
            clearable
            @on-change="checkStatus($event, 'categoryId')"
          >
            <Option
              v-for="item in categoryLists"
              :value="item.categoryId"
              :key="item.categoryId"
            >{{ item.categoryName }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="jump_url" label="跳转外链接">
          <Input
            type="text"
            v-model.trim="formInline.jump_url"
            placeholder="请输入跳转外链接"
            style="width：300px"
          ></Input>
        </FormItem>
        <FormItem prop="cover" label="封面图">
          <upload
            limit="1"
            @uploadImg="uploadImg($event,'cover',multiple=false)"
            @getImgUrl="getImgUrl($event,'cover',multiple=false)"
            :imgs="formInline.cover"
          ></upload>
        </FormItem>
        <FormItem prop="htmlContent" label="富文本内容">
          <!-- <wangEditor v-model="formInline.htmlContent" :id="formInline.htmlContent" @change="editorChange"></wangEditor> -->
          <z-editor
            :id="tinymce"
            v-if="isPublish"
            :value="formInline.htmlContent"
            @input="editorChange"
            ref="editorHtml"
          ></z-editor>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="isPublish=false">取消</Button>
        <Button type="primary" @click="release('formInline')">发布</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  articleList,
  articleInfo,
  save,
  publish,
  modify,
  delArticle,
  categoryList
} from "../../api/article";
import wangEditor from "@/components/wangEditor.vue";
import upload from "@/components/upload.vue";
import editor from "../../components/tinymce";
export default {
  components: {
    wangEditor,
    upload,
    "z-editor": editor
  },
  data() {
    return {
      tinymce: "tinymce",
      limit: 1, //允许上传的数量
      categoryList: [], //分类列表或者标签列表
      categoryLists: [], //分类列表
      list: [],
      page: 1,
      pageSize: 20,
      total: 0,
      loading: false,
      conditions: {
        categoryId: "",
        by: ""
      },
      statusList: [
        {
          value: "category",
          label: "分类查找"
        }
        // {
        //   value:'category',
        //   label:'category'
        // },
      ],
      columns1: [
        {
          title: "id",
          key: "id",
          align: "center",
          minWidth: 200
        },
        {
          title: "名称",
          key: "title",
          align: "center",
          minWidth: 200
        },
        {
          title: "分类名称",
          key: "categoryName",
          align: "center",
          minWidth: 200
        },
        {
          title: "发布时间",
          slot: "publishTime",
          align: "center",
          minWidth: 200
        },
        {
          title: "更新时间",
          slot: "updateTime",
          align: "center",
          minWidth: 200
        },
        {
          title: "操作",
          slot: "action",
          width: 200,
          align: "center"
        }
      ],
      tableHeight: 100,
      isPublish: false,
      isFixed: false,
      username: "",
      id: "", //文章id
      formInline: {
        title: "",
        subMessage: "",
        categoryId: "",
        // content: "",
        cover: "",
        htmlContent: "",
        jump_url:''
      },
      ruleInline: {
        title: [
          {
            required: true,
            message: "请输入文章标题",
            trigger: "blur"
          }
        ],
        subMessage: [
          {
            required: true,
            message: "请输入文章简介",
            trigger: "blur"
          }
        ],
        categoryId: [
          { required: true, message: "请选择文章分类", trigger: "change" }
        ]
        // content: [
        //   {
        //     required: true,
        //     message: "请输入文章内容",
        //     trigger: "blur"
        //   }
        // ],
        // cover: [
        //   {
        //     required: true,
        //     message: "请设置封面图",
        //     trigger: "blur"
        //   }
        // ],
        // htmlContent: [
        //   {
        //     required: true,
        //     message: "请输入富文本内容",
        //     trigger: "blur"
        //   }
        // ]
      }
    };
  },
  created() {
    this.getcategoryList();
    this.getarticleList();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight =
        window.innerHeight - this.$refs.searchHead.offsetHeight - 220;
    });
  },
  methods: {
    // 上传文件
    uploadImg(imgs, k, multiple) {
      if (multiple) {
        this.formInline[k] = JSON.parse(imgs);
      } else {
        this.formInline[k] = JSON.parse(imgs)[0];
      }
    },
    getImgUrl(imgs, k, multiple) {
      console.log(imgs, k);
      if (multiple) {
        this.formInline[k] = imgs;
      } else {
        this.formInline[k] = imgs[0];
      }
    },
    chooseType(e, name) {
      this.conditions[name] = e;
      if (e == "category") {
        this.categoryList = this.categoryLists;
      } else if (e == "tag") {
      }
    },
    checkStatus(e, name) {
      this.formInline[name] = e;
    },
    changeStatus(e, name) {
      this.page = 1;
      this.conditions[name] = e;
      this.getarticleList();
    },
    getcategoryList() {
      //分类列表
      categoryList({ page: 0, pageSize: 999999 }).then(res => {
        if (res.status) {
          this.categoryLists = res.data.list;
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    getarticleList() {
      //文章列表
      this.loading = true;
      const { page, pageSize } = this;
      articleList(
        Object.assign(this.conditions, { page: page - 1, pageSize })
      ).then(res => {
        if (res.status) {
          this.total = res.data.count;
          this.list = res.data.list;
          this.loading = false;
        } else {
          this.$Message.error(res.msg);
          this.loading = false;
        }
      });
    },
    show(row) {
      articleInfo({ id: row.id }).then(res => {
        if (res.status) {
          this.id = res.data.article.id;
          this.formInline = {
            title: res.data.article.title,
            subMessage: res.data.article.subMessage,
            jump_url: res.data.article.jump_url,
            categoryId: res.data.article.categoryId,
            cover: res.data.article.cover,
            htmlContent: res.data.article.htmlContent
          };
          this.isPublish = true;
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    changePage(e) {
      this.page = e;
      this.getarticleList();
    },
    changeSize(e) {
      this.page = 1;
      this.pageSize = e;
      this.getarticleList();
    },
    Publish() {
      this.id = "";
      this.formInline = {
        title: "",
        subMessage: "",
        categoryId: "",
        jump_url: "",
        cover: "",
        htmlContent: ""
      };
      this.isPublish = true;
    },
    release(name) {
      const {
        title,
        subMessage,
        categoryId,
        cover,
        htmlContent,jump_url
      } = this.formInline;
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.id == "") {
            publish({
              title,
              subMessage,
              "category[id]": categoryId,
              cover,
              htmlContent,jump_url
            }).then(res => {
              if (res.status) {
                this.isPublish = false;
                this.getarticleList();
                this.$Message.success(res.msg);
              } else {
                this.$Message.error(res.msg);
              }
            });
          } else {
            modify({
              id: this.id,
              title,
              subMessage,
              "category[id]": categoryId,
              cover,
              htmlContent,jump_url
            }).then(res => {
              if (res.status) {
                this.isPublish = false;
                this.getarticleList();
                this.$Message.success(res.msg);
              } else {
                this.$Message.error(res.msg);
              }
            });
          }
        } else {
        }
      });
    },
    //删除文章
    remove(id) {
      this.$Modal.confirm({
        title: "警告",
        content: `删除后无法恢复，确定要删除？`,
        onOk: () => {
          delArticle({ id }).then(res => {
            if (res.status) {
              this.getarticleList();
              this.$Message.success("删除成功");
            } else {
              this.$Message.error(res.msg);
            }
          });
        },
        onCancel: () => {}
      });
    },
    cancel() {
      this.isPublish = false;
    },
    editorChange(e) {
      this.formInline.htmlContent = e;
    },
    search() {
      this.getarticleList();
    },
    handleReset() {
      this.conditions = {
        categoryId: "",
        by: ""
      };
      this.page = 1;
      this.getarticleList();
    }
  }
};
</script>
<style lang="less" scoped>
.page {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}
</style>
